<script setup>
import {ref} from 'vue'

const props = defineProps({
    form: {
        type: Object,
        required: true
    },
    rules: Object,
})
const emit = defineEmits(['update:form', 'submit'])
const formRef = ref()

const submit = async () => {
    return new Promise((resolve, reject) => {
        formRef.value.validate((valid, fields) => {
            if (valid) {
                console.log('submit!')
                emit('submit', props.form)
            } else {
                console.log('error submit!', fields)
                console.error(fields)
            }
        })
    })
}
</script>

<template>
    <div class="table">
        <div class="table-operator">

        </div>
        <div class="table-filter">
            <el-form ref="formRef" :model="form" label-position="left" label-width="100px" :inline="true" :rules="rules">
                <slot name="filter"></slot>
                <el-form-item>
                    <el-button type="primary" @click="submit">检索</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<style scoped lang="scss">
.table-filter {
    width: 100%;
    padding: 20px;
}
</style>